{template 'header'}
<style>
    #top_tab li{
        line-height: 3;
        color: #333;
    }
    #top_tab .mui-active{
        color: #007aff;
    }
    #slider h4{
        font-size: 14px;
    }
    #slider p{
        font-size: 12px;
    }
</style>
</head>
<body>
<!-- 头部 结束 -->
<div class="mui-content mui-scroll-wrapper" id="main">
    <div class="mui-scroll">
        <!-- 列表tab 开始 -->
        <div class="mui-slider" id="slider">
            <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" id="top_tab">
                <li href="javascript:void(0)" class="mui-control-items mui-col-xs-4 mui-inline mui-active">进行中</li>
                <li href="javascript:void(0)" class="mui-control-items mui-col-xs-4 mui-inline">待审核</li>
                <li href="javascript:void(0)" class="mui-control-items mui-col-xs-4 mui-inline">被驳回</li>
                <li href="javascript:void(0)" class="mui-control-items mui-col-xs-4 mui-inline">已通过</li>
            </div>
            <div class="mui-slider-progress-bar mui-col-xs-4"></div> <!--选项卡滑动条-->
            <div class="mui-slider-group">
                <div class="mui-slider-item mui-control-content">
                    <ul class="mui-table-view" id="tab-content">
                        <!--这里是每条接受的任务-->
                    </ul>
                </div>
            </div>
        </div>
        <!-- 列表 tab 结束 -->
    </div>
</div>
<script id="tab-template" type="text/html">
    {{each list}}
    <li class="mui-table-view-cell mui-media">
        <a href="{{$value.jumpurl}}">
            <img src="{{$value.thumb}}" class="mui-media-object mui-pull-left">
            <div class="mui-media-body">
                <h4>{{$value.title}}</h4>
                <p>验证依据：<span class="mui-badge-primary mui-badge-inverted">{{$value.validate}}</span></p>
                <p class="mui-ellipsis">结束时间：<span class="mui-badge-blue mui-badge-inverted">{{$value.end_time}}</span></p>
                <p class="mui-ellipsis">任务佣金：<span class="mui-badge-yellow mui-badge-inverted">{{$value.task_money}}</span>元</p>
            </div>
        </a>
    </li>
    {{/each}}
</script>
<!-- 底部Tab 开始 -->
{template 'nav'}
<!-- 底部Tba 结束 -->
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script src="{MODULE_URL}assets/js/template-web.js"></script>
<!-- 以上引入第三方插件 -->
<script src="{MODULE_URL}assets/js/public.js"></script>
<script>
    //初始化 mui 顶部 tab 效果
    mui('#slider').slider({
        interval:0 // slider间隔时间
    });
    var type = 1;//默认进入显示已抢任务
    var page = 1;
    var list_url = '{php echo $this->createMobileUrl("member",array("op"=>"task_list"))}';
    mui.ajax(list_url,{
        data:{page:1,type:type},
        dataType:'json',//服务器返回json格式数据
        type:'post',//HTTP请求类型
        async: false,
        timeout:10000,//超时时间设置为10秒；
        success:function(ret){
            var data = {
                list: ret.data
            };
            var html = template('tab-template', data);
            $('#tab-content').html(html);
            page = 2;
        },
        error:function(xhr,type,errorThrown){
            //异常处理；
            mui.alert(errorThrown);
        }
    });
    // 动态添加 top_tab 的 active
    $('#top_tab li').click(function(){
        var index = $(this).index();
        $('#top_tab li').removeClass('mui-active');
        $('#top_tab li').eq(index).addClass('mui-active');
        $('.mui-slider-progress-bar').attr('style','transform: translate3d('+index*100+'%, 0px, 0px) translateZ(0px)')
        type = index + 1;
        page = 1;
        $('#tab-content').html('');
        mui.ajax(list_url,{
            data:{page:1,type:type},
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            async: false,
            timeout:10000,//超时时间设置为10秒；
            success:function(ret){
                var data = {
                    list: ret.data
                };
                var html = template('tab-template', data);
                $('#tab-content').html(html);
                page = 2;
            },
            error:function(xhr,type,errorThrown){
                //异常处理；
                mui.alert(errorThrown);
            }
        });
    });
    mui.init({
        pullRefresh: {
            container: "#main",
            // 下拉刷新
            down: {
                style: 'circle',
                callback: function () {
                    setTimeout(function () {
                        mui('#main').pullRefresh().endPulldownToRefresh();
                        mui.ajax(list_url,{
                            data:{page:1,type:type},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            async: false,
                            timeout:10000,//超时时间设置为10秒；
                            success:function(ret){
                                var data = {
                                    list: ret.data
                                };
                                var html = template('tab-template', data);
                                $('#tab-content').html(html);
                                page = 2;
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                mui.alert(errorThrown);
                            }
                        });
                    }, 1500);
                }
            },
            // 上拉加载
            up: {
                contentrefresh: "正在加载...",
                contentnomore: "没有更多数据了",
                callback: function (e) {
                    setTimeout(function () {
                        mui.ajax(list_url,{
                            data:{page:page,type:type},
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            async: false,
                            timeout:10000,//超时时间设置为10秒；
                            success:function(ret){
                                if(ret.data.length>0){
                                    var data = {
                                        list: ret.data
                                    };
                                    mui('#main').pullRefresh().endPullupToRefresh(false); //有数据穿 false 反之 true
                                    var html = template('tab-template', data);
                                    $('#tab-content').append(html);
                                    page ++ ;
                                }else{
                                    mui('#main').pullRefresh().endPullupToRefresh(true); //有数据穿 false 反之 true
                                }
                            },
                            error:function(xhr,type,errorThrown){
                                //异常处理；
                                mui.alert(errorThrown);
                            }
                        });
                    }, 1500)
                }
            }
        }
    });
</script>
</body>
</html>